<template>
  <div class="homepage">
    <!--  头部和边框     -->
    <div class="homepage-header">
      {{ headerTitle }}
    </div>
    <div class="homepage-bottomFrame"></div>
    <div class="homepage-leftFrame"></div>
    <div class="homepage-rightFrame"></div>
    <!--  left    -->
    <div class="homepage-main">
      <!--     视频监控       -->
      <div class="homepage-main-video">
        <div class="video-card">
          <div class="video-card-title">
            <span>展厅入口摄像头</span>
            <span>采集人结构化摄像头</span>
          </div>
          <div class="video-card-pl">
            <!-- <videoPlayEnt /> -->
          </div>
        </div>
        <!--                <div class="video-card">-->
        <!--                    <div class="video-card-title">-->
        <!--                        采集人结构化摄像头-->
        <!--                    </div>-->
        <!--                    <div class="video-card-pl">-->
        <!--                        <dv-border-box-10 :style="{-->
        <!--                              position: 'absolute',-->
        <!--                                pointerEvents: 'none',-->
        <!--                                zIndex: 2,-->
        <!--                                top: 0,-->
        <!--                                left: 0,right: 0,bottom: 0}" :color="['rgba(0,97,251,0.54)', 'rgba(253,253,253,0)']"/>-->
        <!--                        <videoPlay/>-->
        <!--                    </div>-->
        <!--                </div>-->
      </div>
      <!--       数据统计     -->
      <div class="homepage-main-data">
        <div class="homepage-main-data-item _static">
          <!--        进出入统计         -->
          <div class="_static-card">
            <div class="_static-card-title">
              <span>进出入统计</span>
              <dv-decoration-1
                :color="['rgba(255,255,255,0.37)', '#035af8']"
                :style="{
                  width: '10vw',
                  zIndex: 1,
                  pointerEvents: 'none',
                  height: '2vw',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                }"
              />
            </div>
            <div class="EntryAndExit">
              <div class="EntryAndExit-item">
                <div class="EntryAndExit-item-icon">
                  <img src="../assets/svg/enter.svg" alt="" />
                </div>
                <div class="EntryAndExit-item-body">
                  <div class="EntryAndExit-item-value">99999</div>
                  <div class="EntryAndExit-item-title">进场人数</div>
                </div>
              </div>
              <div class="EntryAndExit-item">
                <div class="EntryAndExit-item-icon">
                  <img src="../assets/svg/leave.svg" alt="" />
                </div>
                <div class="EntryAndExit-item-body">
                  <div class="EntryAndExit-item-value">99999</div>
                  <div class="EntryAndExit-item-title">离场人数</div>
                </div>
              </div>
            </div>
          </div>
          <!--        游客画像         -->
          <div class="_static-card">
            <div class="_static-card-title">
              <span>游客画像</span>
              <dv-decoration-1
                :color="['rgba(255,255,255,0.37)', '#035af8']"
                :style="{
                  width: '10vw',
                  zIndex: 1,
                  pointerEvents: 'none',
                  height: '2vw',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                }"
              />
            </div>
            <div class="_static-card-body" id="tourist"></div>
          </div>
        </div>
        <div class="homepage-main-data-item">
          <div class="homepage-main-data-item-card">
            <div class="homepage-main-data-item-card-title">
              <span>实时客流量</span>
              <dv-decoration-6
                style="width: 200px; height: 30px; opacity: 0.2"
              />
            </div>
            <div class="homepage-main-data-item-card-body" id="realTime"></div>
          </div>
          <div class="homepage-main-data-item-card">
            <div class="homepage-main-data-item-card-title">
              <span>进出入曲线图</span>
              <el-radio-group size="small" v-model="inAndOutValue">
                <el-radio-button label="week">近一周</el-radio-button>
                <el-radio-button label="month">近一月</el-radio-button>
              </el-radio-group>
            </div>
            <div class="homepage-main-data-item-card-body" id="inAndOut"></div>
          </div>
        </div>
      </div>
    </div>

    <!--  right    -->
    <div class="homepage-data">
      <dv-border-box-8
        :style="{
          opacity: 1,
          pointerEvents: 'none',
          position: 'absolute',
          left: 0,
          zIndex: 0,
        }"
      />
      <div class="CharacterData">
        <div class="CharacterData-title">
          <span>
            实时监测数据
            <!--                    <Decoration2 style={{width: '100%', height: '5px', position: 'absolute', left: 0, bottom: 0}}/>-->
          </span>
          <div class="CharacterData-title-ext">
            <el-radio-group size="small" v-model="characterType">
              <el-radio-button label="base">基本数据</el-radio-button>
              <el-radio-button label="info">详细数据</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="CharacterData-body">
          <template v-for="(item, index) in structural">
            <div class="CharacterData-body-item" :key="index">
              <div class="CharacterData-body-item-img">
            
                <el-image
                  style="width: 90%; height: 90%"
                  :src="'http://172.20.202.85:18080' +item.pics.split(',')[0]"
                  fit="fill"
                ></el-image>
              </div>
              <div
                class="CharacterData-body-item-dec"
                v-show="characterType === 'base' ? true : false"
              >
                <div class="CharacterData-body-item-dec-row">
                  设备{{ item.deviceSn }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  时间 {{ item.createTime }}
                </div>
                <div class="CharacterData-body-item-dec-row">类型 人脸</div>
                <div class="CharacterData-body-item-dec-row">
                  <!-- <div>年龄</div>
                  <div style="dispaly:flex">
                    <div>{{ item.age }}</div>
                    <div>
                      <div>+</div>
                      <div>-</div>
                    </div>
                  </div> -->

                  年龄 {{ item.age }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  帽子 {{ item.wearHat }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  口罩 {{ item.wearRespirator }}
                </div>

                <!-- <div
                  v-for="(cols, colsKey) in characterType === 'base'
                    ? structuralBaseOption
                    : structuralInfoOption"
                  :key="colsKey"
                  class="CharacterData-body-item-dec-row"
                >
                  <div v-for="(col, colIndex) in cols" :key="colIndex">
                    {{ col }}
                  </div>
                </div> -->
              </div>

              <div
                class="CharacterData-body-item-dec"
                v-show="characterType === 'base' ? false : true"
              >
                <div class="CharacterData-body-item-dec-row">
                  设备{{ item.deviceSn }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  时间 {{ item.createTime }}
                </div>
                <div class="CharacterData-body-item-dec-row">类型 人脸</div>
                <div class="CharacterData-body-item-dec-row">
                  年龄 {{ item.age }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  性别 {{ item.gender == "2" ? "男" : "女" }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  帽子 {{ item.wearHat }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  眼睛 {{ item.wearGlasses }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  口罩 {{ item.wearRespirator }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  发型 {{ item.hairStyle }}
                </div>
                <div class="CharacterData-body-item-dec-row">
                  胡子 {{ item.beardClass }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
import videoPlayEnt from "@/components/videoPlayEnt.vue";

import axios from "axios";

// 模拟环境使用方法
import Mock from "mockjs";

function getDaysInRange(start, end) {
  const days = [];
  let current = moment(start);
  while (current.isSameOrBefore(end)) {
    days.push(current.format("MM-DD"));
    current.add(1, "days");
  }
  return days;
}

function getRecentWeek() {
  const now = moment();
  const weekAgo = now.clone().subtract(1, "weeks");

  return getDaysInRange(weekAgo, now);
}

function getRecentMonth() {
  const now = moment();
  const monthAgo = now.clone().subtract(1, "months");

  // 获取一个月前的开始日期
  const startOfMonth = monthAgo.startOf("month");
  // 获取当前月的结束日期
  const endOfMonth = now.endOf("month");

  return getDaysInRange(startOfMonth, endOfMonth);
}

function vwToPx(vwValue) {
  // 获取视口宽度
  const viewportWidth = window.innerWidth;
  // 计算 1vw 的像素值
  const oneVwInPx = viewportWidth / 100;
  // 将 vw 值转换为像素值
  const pxValue = vwValue * oneVwInPx;
  return pxValue;
}

export default {
  name: "homepage",
  components: {
    videoPlayEnt,
  },
  data() {
    return {
      headerTitle: "视频大数据结构化平台",
      inAndOutValue: "week",
      characterType: "base",
      inAndOutChart: null,
      structural: [],
      structuralBaseOption: [
        ["设备", "smoke"],
        ["时间", "2024/07/10 09:22:11"],
        ["类型", "人脸"],
        ["年龄", "33"],
        ["帽子", "无帽子"],
        ["口罩", "无口罩"],
      ],
      structuralInfoOption: [
        ["设备", "smoke"],
        ["时间", "2024/07/10 09:22:11"],
        ["类型", "人脸"],
        ["年龄", "33"],
        ["性别", "男"],
        ["帽子", "无帽子"],
        ["眼镜", "无眼睛"],
        ["口罩", "无口罩"],
        ["发型", "平头"],
        ["胡子", "无胡子"],
      ],
    };
  },
  watch: {
    inAndOutValue() {
      this.initInAndOutChart();
    },
  },
  mounted() {
    this.initTouristChart();
    this.initRealTimeChart();
    this.initInAndOutChart();
    this.initStructuralData();
  },
  methods: {
    // 用户画像
    initTouristChart() {
      var symbols = [
        "path://M18.2629891,11.7131596 L6.8091608,11.7131596 C1.6685112,11.7131596 0,13.032145 0,18.6237673 L0,34.9928467 C0,38.1719847 4.28388932,38.1719847 4.28388932,34.9928467 L4.65591984,20.0216948 L5.74941883,20.0216948 L5.74941883,61.000787 C5.74941883,65.2508314 11.5891201,65.1268798 11.5891201,61.000787 L11.9611506,37.2137775 L13.1110872,37.2137775 L13.4831177,61.000787 C13.4831177,65.1268798 19.3114787,65.2508314 19.3114787,61.000787 L19.3114787,20.0216948 L20.4162301,20.0216948 L20.7882606,34.9928467 C20.7882606,38.1719847 25.0721499,38.1719847 25.0721499,34.9928467 L25.0721499,18.6237673 C25.0721499,13.032145 23.4038145,11.7131596 18.2629891,11.7131596 M12.5361629,1.11022302e-13 C15.4784742,1.11022302e-13 17.8684539,2.38997966 17.8684539,5.33237894 C17.8684539,8.27469031 15.4784742,10.66467 12.5361629,10.66467 C9.59376358,10.66467 7.20378392,8.27469031 7.20378392,5.33237894 C7.20378392,2.38997966 9.59376358,1.11022302e-13 12.5361629,1.11022302e-13",
        "path://M28.9624207,31.5315864 L24.4142575,16.4793596 C23.5227152,13.8063773 20.8817445,11.7111088 17.0107398,11.7111088 L12.112691,11.7111088 C8.24168636,11.7111088 5.60080331,13.8064652 4.70917331,16.4793596 L0.149791395,31.5315864 C-0.786976655,34.7595013 2.9373074,35.9147532 3.9192135,32.890727 L8.72689855,19.1296485 L9.2799493,19.1296485 C9.2799493,19.1296485 2.95992025,43.7750224 2.70031069,44.6924335 C2.56498417,45.1567684 2.74553639,45.4852068 3.24205501,45.4852068 L8.704461,45.4852068 L8.704461,61.6700801 C8.704461,64.9659872 13.625035,64.9659872 13.625035,61.6700801 L13.625035,45.360657 L15.5097899,45.360657 L15.4984835,61.6700801 C15.4984835,64.9659872 20.4191451,64.9659872 20.4191451,61.6700801 L20.4191451,45.4852068 L25.8814635,45.4852068 C26.3667633,45.4852068 26.5586219,45.1567684 26.4345142,44.6924335 C26.1636859,43.7750224 19.8436568,19.1296485 19.8436568,19.1296485 L20.3966199,19.1296485 L25.2043926,32.890727 C26.1862111,35.9147532 29.9105828,34.7595013 28.9625083,31.5315864 L28.9624207,31.5315864 Z M14.5617154,0 C17.4960397,0 19.8773132,2.3898427 19.8773132,5.33453001 C19.8773132,8.27930527 17.4960397,10.66906 14.5617154,10.66906 C11.6274788,10.66906 9.24611767,8.27930527 9.24611767,5.33453001 C9.24611767,2.3898427 11.6274788,0 14.5617154,0 L14.5617154,0 Z",
        "path://M512 292.205897c80.855572 0 146.358821-65.503248 146.358821-146.358821C658.358821 65.503248 592.855572 0 512 0 431.144428 0 365.641179 65.503248 365.641179 146.358821 365.641179 227.214393 431.144428 292.205897 512 292.205897zM512 731.282359c-80.855572 0-146.358821 65.503248-146.358821 146.358821 0 80.855572 65.503248 146.358821 146.358821 146.358821 80.855572 0 146.358821-65.503248 146.358821-146.358821C658.358821 796.273863 592.855572 731.282359 512 731.282359z",
      ];
      const chart = echarts.init(document.getElementById("tourist"));
      var bodyMax = 100; //指定图形界限的值
      var labelSetting = {
        normal: {
          show: true,
          position: "bottom",
          offset: [0, 30],
          formatter: function (param) {
            if (param.dataIndex) {
              return (
                "女 占比：" + ((param.value / bodyMax) * 100).toFixed(0) + "%"
              );
            }
            return (
              "男 占比：" + ((param.value / bodyMax) * 100).toFixed(0) + "%"
            );
          },
          textStyle: {
            fontSize: vwToPx(0.8),
            color: "#edebeb",
          },
        },
      };
      const option = {
        tooltip: {
          show: false, //鼠标放上去显示悬浮数据
        },
        grid: {
          left: "20%",
          right: "20%",
          top: "20%",
          bottom: "30%",
          containLabel: true,
        },
        xAxis: {
          data: ["a", "x", "b"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          max: bodyMax,
          splitLine: {
            show: false,
          },
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLine: {
            // 轴线
            show: false,
          },
          axisLabel: {
            // 轴坐标文字
            show: false,
          },
        },
        series: [
          {
            type: "pictorialBar",
            symbolClip: true,
            symbolBoundingData: bodyMax,
            label: labelSetting,
            data: [
              {
                value: 26.5,
                symbol: symbols[0],
                itemStyle: {
                  normal: {
                    color: "rgba(105,204,230)", //单独控制颜色
                  },
                },
              },
              {},
              {
                value: 73.5,
                symbol: symbols[1],
                itemStyle: {
                  normal: {
                    color: "rgba(255,130,130)", //单独控制颜色
                  },
                },
              },
            ],
            z: 10,
          },
          {
            // 设置背景底色，不同的情况用这个
            name: "full",
            type: "pictorialBar", //异型柱状图 图片、SVG PathData
            symbolBoundingData: bodyMax,
            animationDuration: 0,
            itemStyle: {
              normal: {
                color: "#ccc", //设置全部颜色，统一设置
              },
            },
            z: 10,
            data: [
              {
                itemStyle: {
                  normal: {
                    color: "rgba(105,204,230,0.40)", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[0],
              },
              {
                // 设置中间冒号
                itemStyle: {
                  normal: {
                    color: "transparent", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[2],
                symbolSize: [8, "18%"],
                symbolOffset: [0, "-200%"],
              },
              {
                itemStyle: {
                  normal: {
                    color: "rgba(255,130,130,0.40)", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[1],
              },
            ],
          },
        ],
      };
      chart.setOption(option);
      window.addEventListener("resize", () => chart.resize());
    },
    // 实时客流量
    initRealTimeChart() {
      const chart = echarts.init(document.getElementById("realTime"));
      const option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(8,145,239,0.33)", // 背景颜色
          borderColor: "#2c63f1", // 边框颜色
          axisPointer: {
            label: {
              backgroundColor: "#2c63f1",
              fontSize: vwToPx(0.8),
            },
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
          textStyle: {
            // 文本样式
            color: "#efefef",
            fontSize: vwToPx(0.8),
            fontFamily: "Arial, sans-serif",
          },
        },
        grid: {
          top: "8%",
          left: "3%",
          right: "2%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize: vwToPx(0.6),
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#195384",
              },
            },
            data: [
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(161,187,232,0.09)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
                fontSize: vwToPx(0.6),
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "人流量",
            type: "line",
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: vwToPx(0.5),
            lineStyle: {
              normal: {
                color: "#7ba6ef",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: vwToPx(0.6),
                color: "#ffffff",
              },
            },
            itemStyle: {
              color: "rgba(36,94,220,0.8)",
              borderColor: "#8ca7fb",
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              // show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,120,229,0.05)",
                    },
                    {
                      offset: 1,
                      color: "rgba(3,90,248,0.3)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(44,99,241,0.15)",
                shadowBlur: 10,
              },
            },
            data: [
              502.84, 205.97, 332.79, 281.55, 398.35, 214.02, 502.84, 205.97,
              332.79, 281.55, 398.35, 214.02,
            ],
          },
        ],
      };
      chart.setOption(option);
      window.addEventListener("resize", () => chart.resize());
    },
    // 进出入曲线
    initInAndOutChart(type = this.inAndOutValue) {
      let chart = this.inAndOutChart;
      if (!chart) {
        chart = echarts.init(document.getElementById("inAndOut"));
      }
      const dates = type === "week" ? getRecentWeek() : getRecentMonth();
      const Random = Mock.Random;
      const data1 = dates.map(() => Random.integer(1000, 5000));
      const data2 = dates.map(() => Random.integer(1000, 5000));
      const option = {
        grid: {
          left: "0%",
          right: "3%",
          top: "5%",
          bottom: "12%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(8,145,239,0.33)", // 背景颜色
          borderColor: "#2c63f1", // 边框颜色
          borderWidth: 1, // 边框宽度
          textStyle: {
            // 文本样式
            color: "#efefef",
            fontSize: vwToPx(0.8),
            fontFamily: "Arial, sans-serif",
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#2c63f1",
              fontSize: vwToPx(0.8),
            },
          },
        },
        legend: {
          show: true,
          icon: "stack",
          itemWidth: vwToPx(0.6),
          itemHeight: vwToPx(0.6),
          textStyle: {
            color: "#d6f4ff",
            fontSize: vwToPx(0.6),
          },
          bottom: 0,
          left: "center",
          data: ["进场", "离场"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize: vwToPx(0.6),
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#195384",
              },
            },
            data: dates,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#b6c5c5",
                fontSize: vwToPx(0.6),
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
        ],
        series: [
          {
            name: "进场",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#0092f6",
                lineStyle: {
                  color: "#0092f6",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(7,44,90,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,146,246,0.9)",
                    },
                  ]),
                },
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: "red",
                },
              },
            },
            data: data1,
          },
          {
            name: "离场",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#904242",
                lineStyle: {
                  color: "#be6e6e",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(7,44,90,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(144,66,66,0.73)",
                    },
                  ]),
                },
              },
            },
            data: data2,
          },
        ],
      };
      chart.setOption(option);
      window.addEventListener("resize", () => chart.resize());
    },
    initStructuralData() {
      const Random = Mock.Random;
      const data =
        Mock.mock({
          "list|200": [
            {
              "id|+1": 1,
              img: "https://img2.baidu.com/it/u=550246668,972103881&fm=253&fmt=auto&app=138&f=JPEG?w=613&h=500",
              date: "@datetime('2024/07/dd HH:mm:ss')", // 随机生成中文姓名
              state: Random.boolean,
              result: Random.boolean,
            },
          ],
        }).list || [];



      axios
        .get("http://172.20.202.85:18080/alarmMessages/list")
        .then((response) => {
          console.log(111, response.data);
          this.structural = response.data;
          this.structural.map(item=>{
          
            console.log(1111,item.pics.split(",")[0])
           
          })
        })
        .catch((error) => {
          //   console.error('There was an error!', error);
        });
    },
  },
};
</script>

<style scoped lang="less">
.homepage {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
  background: #000c34 url("@/assets/image/bgdio.png") top center no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4.5vw 2vw 2vw;

  .frame() {
    position: absolute;
    background: url("@/assets/image/bottomFrame.png") center no-repeat;
    pointer-events: none;
  }

  &-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url("@/assets/image/header.png") top center no-repeat;
    background-size: contain;
    text-align: center;
    font-size: 1.3vw;
    font-weight: bold;
    color: #fff;
    letter-spacing: 10px;
    line-height: 250%;
    pointer-events: none;
  }

  &-bottomFrame {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5%;
    max-height: 100px;
    background: url("@/assets/image/bottomFrame.png") center no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 9;
  }

  &-leftFrame {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2%;
    height: 97%;
    max-width: 80px;
    background: url("@/assets/image/leftFrame.png") center no-repeat;
    background-size: 98% 100%;
    pointer-events: none;
  }

  &-rightFrame {
    position: absolute;
    bottom: 0;
    height: 97%;
    right: 0;
    width: 2%;
    max-width: 80px;
    background: url("@/assets/image/rightFrame.png") center no-repeat;
    background-size: 98% 100%;
    pointer-events: none;
  }

  &-main {
    display: flex;
    width: 70vw;
    z-index: 9;
    height: 100%;
    flex-direction: column;

    &-video {
      display: flex;
    }

    &-data {
      flex: 1;
      width: 100%;
      margin-top: 0.5vw;
      background: linear-gradient(90deg, rgba(36, 67, 169, 0.16), transparent);
      background-size: cover;
      position: relative;
      backdrop-filter: blur(5px);
      display: flex;

      ._static {
        flex: none !important;
        width: 20%;
        min-width: 400px;
        margin-right: 0.5vw;
        display: flex;
        flex-direction: column;

        &-card {
          flex: 1;
          margin-right: 0.5vw;
          padding: 0.5vw;
          display: flex;
          flex-direction: column;

          &:first-child {
            flex: none !important;
          }

          &-title {
            font-size: 0.8vw;
            color: #ffffff;
            letter-spacing: 2px;
            position: relative;
            display: flex;
            height: 1.8vw;
            align-items: center;
            justify-content: space-between;

            * {
              font-size: 0.8vw;
            }

            //.ant-segmented{
            //    .ant-segmented-item-label{
            //        height: 1.2vw;
            //        line-height: 1vw;
            //    }
            //}
            span {
              position: relative;
              z-index: 3;
              font-weight: bold;
            }
          }

          &-body {
            flex: 1;
            position: relative;
          }
        }
      }

      &-item {
        flex: 1;
        display: flex;
        flex-direction: column;

        &-card {
          flex: 1;
          margin-right: 0.5vw;
          padding: 0.5vw;
          display: flex;
          flex-direction: column;

          &-title {
            font-size: 0.8vw;
            color: #ffffff;
            letter-spacing: 2px;
            position: relative;
            display: flex;
            height: 1.8vw;
            align-items: center;
            justify-content: space-between;

            * {
              font-size: 0.8vw;
            }

            .ant-segmented {
              .ant-segmented-item-label {
                height: 1.2vw;
                line-height: 1vw;
              }
            }

            span {
              position: relative;
              z-index: 3;
              font-weight: bold;
            }
          }

          &-body {
            flex: 1;
            position: relative;
          }
        }
      }
    }
  }

  &-data {
    flex: 1;
    display: flex;
    height: 100%;
    margin-left: 0.5vw;
    position: relative;
    background: linear-gradient(0, #0c287f, transparent);
  }
}

.video-card {
  width: 100%;
  position: relative;
  margin-right: 0.5vw;

  &:last-child {
    margin-right: 0;
  }

  &-title {
    font-size: 0.9vw;
    color: #ffffff;
    height: 3vw;
    background: #021641 url("@/assets/image/titlebg.png") center no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    line-height: 2.5vw;
    padding: 0 30px;
    font-weight: bold;
    letter-spacing: 2px;
    span {
      flex: 1;
    }
  }

  &-pl {
    position: relative;
    width: 100%;
    padding-bottom: calc(56.25% / 2);
    overflow: hidden;
  }
}

.EntryAndExit {
  display: flex;
  width: 100%;
  padding: 0.5vw;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin-top: 1vw;

  &-item {
    height: 100%;
    flex: 1;
    font-weight: bold;
    color: #ffffff;
    font-size: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;

    &-body {
      flex: 1;
    }

    &-icon {
      width: 1.8vw;
      height: 1.8vw;
      margin: 0 15px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    letter-spacing: 2px;

    &-value {
      font-size: 1vw;
    }

    &-title {
      font-size: 0.6vw;
      line-height: 2;
      color: #d0d0d0;
    }
  }
}

.CharacterData {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;

  &-title {
    display: flex;
    justify-content: space-between;
    font-size: 1vw;
    font-weight: bold;
    color: #fff;
    padding: 0.8vw;
    letter-spacing: 4px;
    position: relative;

    span {
      padding: 0 15px;
      position: relative;
    }

    &-ext {
      font-size: 0.6vw;
      font-weight: normal;
      letter-spacing: 0;

      * {
        font-size: 0.8vw;
      }

      .ant-segmented {
        .ant-segmented-item-label {
          height: 1.2vw;
          line-height: 1vw;
        }
      }
    }
  }

  &-body {
    flex: 1;
    position: relative;
    overflow: auto;

    &-item {
      min-height: 100px;
      position: relative;
      display: flex;
      padding: 0.5vw 1vw;
      box-sizing: border-box;

      &-img {
        width: 6vw;
        height: 6vw;
        background: #14375b;
        padding: 0.2vw;
        display: flex;
        align-items: center;
        border: 0.1vw #1a4b7d solid;
        justify-content: center;
      }

      &-dec {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        padding: 0 0.5vw 0 1.5vw;

        &-row {
          display: flex;
          font-size: 0.7vw;
          color: #ffffff;
          min-width: 50%;
          padding: 0.2vw 0;

          div {
            &:first-child {
              width: 2vw;
              color: #e1e1e1;
            }

            &:last-child {
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
